<template>
  <div class="search-container" v-loading="loading">
    <el-form inline=true>
      <el-form-item>
        <div>
          说明：请根据实际情况添加各阶段工作情况，毕业参加工作至今的各阶段均需填写，未如实填写、未填全者将视为有意隐瞒，取消资格！
        </div>
      </el-form-item>
      <br/>
      <el-form-item>
        <el-button @click="addRow">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="data-container">
      <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="80" :label="$t('msg.common.serial')"/>
      <el-table-column prop="startDate" label="开始时间" width="240">
        <template  #default="scope">
          <template v-if="scope.row.edit">
            <el-date-picker
              type="date"
              placeholder="选择年月日"
              value-format="YYYY-MM-DD"
              v-model="scope.row.startDate">
            </el-date-picker>
          </template>
          <template v-else>{{ scope.row.startDate }}</template>
          <!-- <el-input></el-input> -->
        </template>
      </el-table-column>
      <el-table-column prop="endDate" label="结束时间" width="240">
        <template #default="scope">
          <template v-if="scope.row.edit">
            <el-date-picker
              type="date"
              placeholder="选择年月日"
              value-format="YYYY-MM-DD"
              v-model="scope.row.endDate">
            </el-date-picker>
          <!-- <el-input></el-input> -->
          </template>
          <template v-else>{{ scope.row.endDate }}</template>
        </template>
      </el-table-column>
      <el-table-column prop="company" label="工作单位" width="200">
        <template #default="scope">
          <template v-if="scope.row.edit">
            <el-input v-model="scope.row.company" maxlength=80></el-input>
          </template>
          <template v-else>{{ scope.row.company }}</template>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="所在部门" width="200">
        <template #default="scope">
          <template v-if="scope.row.edit">
            <el-input v-model="scope.row.department" maxlength=80></el-input>
          </template>
          <template v-else>{{ scope.row.department }}</template>
        </template>
      </el-table-column>
      <el-table-column prop="duties" label="职业/职务" width="200">
        <template #default="scope">
          <template v-if="scope.row.edit">
            <el-input v-model="scope.row.duties" maxlength=80></el-input>
          </template>
          <template v-else>{{ scope.row.duties }}</template>
        </template>
      </el-table-column>
      <el-table-column prop="hospitalLevel" label="医院等级" width="180">
        <template #default="scope">
          <template v-if="scope.row.edit">
            <el-select v-model="scope.row.hospitalLevel" placeholder="请选择">
              <el-option v-for="item of hospitalLevels" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </template>
          <template v-else>{{ scope.row.hospitalLevel }}</template>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="sendStatus" label="发送状态" width="120">
        <template #default="scope">
          <el-select v-model="scope.row.sendStatus" placeholder="" name="sendStatus" disabled >
            <el-option label="已发送" value="true" />
            <el-option label="未发送" value="false" />
          </el-select>
        </template>
      </el-table-column> -->
      <el-table-column fixed="right" :label="$t('msg.common.operation')" width="150">
        <!-- vue3中 solt-scop已经放弃使用 -->
        <template #default="scope">
          <el-button v-show="!scope.row.edit" text size="small" @click="handleClick(scope.row)">{{$t('msg.common.edit')}}</el-button>
          <el-button v-show="scope.row.edit" text size="small" @click="save(scope.row)">{{$t('msg.common.save')}}</el-button>
          <el-button v-show="scope.row.edit" text size="small" @click="cancel(scope.row)">取消</el-button>
          <el-button v-show="!scope.row.edit" text type="danger" size="small" @click="handleDelete(scope.row)">{{$t('msg.common.delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onActivated } from 'vue'
import { deleteById, modify, add } from '@/api/common/common'
import { list } from '@/api/applicant/work'
import { hospitalLevels } from '@/const/index'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'

const loading = ref(false)

const tableData = ref([])

const i18n = useI18n()

const searchFunction = async () => {
  list().then(res => {
    tableData.value = res || []
    ElMessage.success(i18n.t('msg.common.success'))
  }).catch(err => {
    ElMessage.success(i18n.t('msg.common.error') || err.message)
  })
}

onActivated(searchFunction())

const handleDelete = row => {
  loading.value = true
  deleteById(row.id, 'work').then(res => {
    // console.log(res)
    ElMessage.success(i18n.t('msg.common.success'))
    searchFunction()
    loading.value = false
  }).catch(err => {
    loading.value = false
    ElMessage.error(err.message)
  })
}

const handleClick = (row) => {
  row.edit = true
  console.log(row)
}

const cancel = (row) => {
  if (!row.id) {
    tableData.value.pop()
  } else {
    delete row.edit
  }
}

const addRow = () => {
  // 判断最后一个数据是否存在
  if (tableData.value > 0 && tableData.value[tableData.value.length - 1].edit) {
    ElMessage.error('请先取消当前数据正在编辑的数据')
    return
  }

  // 增加一个空对象
  tableData.value.push({ edit: true })

  console.log(tableData.value)
}

const save = row => {
  console.log(row)
  delete row.edit
  // 保存
  if (row.id) {
    modify(row, row.id, 'work').then(res => {
      if (res) {
        ElMessage.success('修改成功')
      }
      searchFunction()
    })
  } else {
    add(row, 'work/add').then(res => {
      console.log(res)
      if (res) {
        ElMessage.success('新增成功')
      }
      searchFunction()
    })
  }
  // delete row.edit
}

</script>

<style lang="scss" scope>
.search-container {
  width: 100%;
  height: 150px;
}
</style>
